<script lang="ts" setup>
import PageDialog from "@/components/PageDialog/index.vue";
import {ref} from "vue";
import {ProjectObj, StationObj} from "@/api/demoClass";
import {addProject, addStation, editProject, editStation, operatorList, projectList} from "@/api/demoApi";
import {message} from "@/utils/message";
import {ElMessageBox} from "element-plus";

defineOptions({
  name: "stationDialog"
});

/**-------------------表单相关-------------------**/
//表单参数
const formData = ref({
  id: null,
  stationNo:null,
  planName:null,
  isNew:0,
  versions:0,
  area:null,
  operatorId: null,
  projectId:null,
  address:null,
  latitude:null,
  longitude:null,
  status: 1
})

//表单校验
const formRules = ref({
  stationNo:[{required:true,message:'请输入更新后编号',trigger:'blur'}],
  planName:[{required:true,message:'请输入规划站名',trigger:'blur'}],
  isNew:[{required:true,message:'请选择是否新展',trigger:'change'}],
  versions:[{required:true,message:'请选择新老项目',trigger:'change'}],
  area:[{required:true,message:'请选择所属区域',trigger:'change'}],
  operatorId:[{required:true,message:'请选择运营商',trigger:'change'}],
  projectId:[{required:true,message:'请选择所属项目',trigger:'change'}],
})

//业主选项
const projectOptions = ref([])
const isNewOptions = [
  {value:0,label:'否'},
  {value:1,label:'是'},
]
const versionOptions = [
  {value:0,label:'新项目'},
  {value:1,label:'老项目'},
]
const operatorOptions = ref([])
const areaOptions = [
  {value:0,label:'西湖区'},
  {value:1,label:'拱墅区'},
  {value:2,label:'上城区'},
  {value:3,label:'临平区'},
]

const getProjectOptions = () => {
  projectOptions.value = projectList().map(item=>({value:item.id,label:`${item.projectNo}(${item.projectName})`}))
}
const getOperatorOptions = ()=>{
  operatorOptions.value = operatorList().map(item=>({value:item.id,label:item.operator}))
}

/**-------------------打开弹框-------------------**/
//标题
const dialogTitle = ref('')
const dialog = ref()
//弹框显示
const dialogShow = (title: string,data?: object)=>{
  dialogTitle.value = title
  if(data) {
    formData.value = {...data}
  }
  getProjectOptions()
  getOperatorOptions()
  dialog.value.dialogVisible = true
}
defineExpose({
  dialogShow
})

/**-------------------事件回调-------------------**/
//创建项目
const createProject = async () =>{
  try{
    await form.value.validateField(['stationNo','planName'])
    await ElMessageBox.confirm(`确认添加项目编号为：${formData.value.stationNo}-YZ，项目名称为：${formData.value.planName}的项目吗？`, '快速添加',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    const newProject = new ProjectObj({
      projectNo: `${formData.value.stationNo}-YZ`,
      projectName: formData.value.planName
    })
    addProject(newProject)
    projectOptions.value = projectList().map(item=>({value:item.id,label:`${item.projectNo}(${item.projectName})`}))
    formData.value.projectId = newProject.id
    message("添加项目成功，已快速绑定该项目！", { type: "success" });
  }catch(err){

  }
}
//取消
const form = ref()
const handlerCancel = ()=> new Promise(async (resolve,reject)=>{
  try{
    await form.value.resetFields()
    formData.value = {
      id: null,
      stationNo:null,
      planName:null,
      isNew:null,
      versions:null,
      area:null,
      operator:null,
      projectId:null,
      projectName:null,
      address:null,
      latitude:null,
      longitude:null,
      status: 1
    }
    dialog.value.dialogVisible = false
    resolve({})
  }catch(e){
    console.log(e)
    reject(e)
  }
})
//确认
const emits = defineEmits(['done'])
const handlerConfirm = ()=> new Promise(async (resolve,reject)=>{
  try{
    await form.value.validate()
    //todo 新增、编辑接口
    if(!formData.value.id) {
      const newProject = new StationObj(formData.value)
      addStation(newProject)
      message("添加成功", { type: "success" });
    }else {
      editStation(formData.value)
      message("编辑成功", { type: "success" });
    }
    await handlerCancel()
    emits('done')
    resolve({})
  }catch(e){
    reject(e)
  }
})
//未完成提示
const notDone = ()=>{
  message('抱歉，功能设计中...',{type:'warning'})
}
</script>

<template>
  <PageDialog ref="dialog" :handler-cancel="handlerCancel" :handler-confirm="handlerConfirm" :title="dialogTitle" width="55%">
    <el-form ref="form" :model="formData" :rules="formRules" label-position="top" label-width="auto">
      <el-form-item label="更新后编号" prop="stationNo">
        <el-input v-model="formData.stationNo" clearable placeholder="请输入更新后编号" />
      </el-form-item>
      <el-form-item label="规划站名" prop="planName">
        <el-input v-model="formData.planName" clearable placeholder="请输入规划站名" />
      </el-form-item>
      <el-form-item label="所属项目" prop="projectId">
        <el-select v-model="formData.projectId" clearable filterable placeholder="请选择所属项目">
          <el-option v-for="(item,index) in projectOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否新展" prop="isNew">
        <el-select v-model="formData.isNew" clearable filterable placeholder="请选择是否新展">
          <el-option v-for="(item,index) in isNewOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="新老项目" prop="versions">
        <el-select v-model="formData.versions" clearable filterable placeholder="请选择新老项目">
          <el-option v-for="(item,index) in versionOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属区域" prop="area">
        <el-select v-model="formData.area" clearable filterable placeholder="请选择所属区域">
          <el-option v-for="(item,index) in areaOptions" :key="index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="运营商" prop="operatorId">
        <el-select v-model="formData.operatorId" clearable filterable placeholder="请选择运营商">
          <el-option v-for="(item,index) in operatorOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="formData.address" clearable placeholder="请输入详细地址" />
      </el-form-item>
      <el-form-item label="经纬度">
        <el-button size="small" type="primary" @click="notDone">选择经纬度</el-button>
      </el-form-item>
      <el-form-item>
        <el-button text type="primary" @click="createProject">未搜索到项目？点击使用站点编号和名称快速创建</el-button>
      </el-form-item>
    </el-form>
  </PageDialog>
</template>

<style lang="scss" scoped>
:deep(.el-form) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  .el-form-item {
    width: 48%;

    .el-input,
    .el-select {
      width: 100%;
    }
  }
}
</style>
